<template>
  <div class="f-columnY menu">
    <div class="header">
      <el-button 
        type="primary" 
        size="mini" 
        icon="el-icon-plus" 
        plain
        @click="handleAdd">
        新增
      </el-button>
    </div>
    <div class="f-flex1">
      <el-scrollbar style="height:100%" class="scrollbar-x">
        <el-tree 
          class="tree"
          ref="tree"
          :data="tree" 
          :props="defaultProps"
          @node-click="handleNodeClick">
          <div class="f-betweenX custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <i @click="append(node, data)" class="el-icon-plus"></i><!--增加分组-->
              <!-- 根节点不需要删除和重命名 -->
              <i v-if="data.id !== 0" @click="deletes(node, data)" class="el-icon-delete"></i><!--删除分组-->
              <i v-if="data.id !== 0" @click="rename(node, data)" class="el-icon-edit"></i><!--重命名分组-->
            </span>
          </div>
        </el-tree>
      </el-scrollbar>
      <!-- 新增 -->
      <add ref="add" @addPersonnel="addPersonnel"></add>
    </div>
  </div>
  
</template>

<script>
import Add from './Add.vue'
import { getSspaceTree } from '@/api/settings'
export default {
  components: {
    Add
  },
  data() {
    return {
      tree: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        disabled: 'disabled'
      },
      selectData: {},
      selectNode: {},
      type: 'default',
    }
  },
  mounted() {
    getSspaceTree()
      .then(res => {
        if (res.code === 0) {
          this.tree = res.data
        } else {
          // this.$message.error(res.msg)
        }
      })
      .catch(err => {
        console.log(err)
      })
  },
  methods: {
    // 新增
    handleAdd() {
      // handleAdd
      this.$refs.add.toggleAdd(true, this.type)
    },
    // 添加
    append(node, data) {
      this.selectNode = node
      this.selectData = data
      this.$refs.add.toggleAdd(true, data.type)
    },
    addPersonnel(data) {
      if (this.type == 'default') {
        this.tree.push(data)
      } else {
        this.selectData.children.push(data)
        if (!this.selectNode.expanded) {
          this.selectNode.expanded = true
        }
      }
    },
    // 选中
    handleNodeClick(data) {
      this.type = data.type
      const sendData = {
        icon: data.icon || '',
        title: data.label || '',
        items: data.children || []
      }
      this.$emit('getMessage', sendData)
    }

  }
}
</script>

<style lang="scss" scoped>
  .menu {
    width: 300px;
    height: 100%;
    border: 1px solid #ebeef5;
    box-shadow: -1px -1px 2px 2px #ebeef5;
    .header {
      padding: 20px;
      border-bottom: 1px solid #ebeef5;
    }
    .tree {
      padding: 20px;
      ::v-deep .el-tree-node__content {
        height: 36px;
      }
      ::v-deep .custom-tree-node {
        width: 100%;
        i {
          padding: 0 3px;
        }
      }
    }
  }
  
</style>
